<template>
  <view class="container">

    <!-- 页面头部 -->
    <view class="header">
      <view class="title">
        <text>注册关联账号</text>
      </view>
      <view class="sub-title">
        <text>提交前请仔细核对推荐人ID</text>
      </view>
    </view>
    <!-- 表单 -->
    <view class="login-form">		
      <form id="loginForm">
      <view class="form-item">
        <input class="form-item--input" type="number" v-model="refereeId" maxlength="10" placeholder="请输入推荐人ID" />
      </view>
	  <view class="form-item">
	    <input class="form-item--input" type="number" v-model="mobile" maxlength="11" placeholder="请输入手机号码" />
	  </view>
	  <view class="form-item">
	    <input class="form-item--input" type="text" v-model="password" maxlength="11" placeholder=" 请输入登陆密码" />
	  </view>
      <!-- 图形验证码 -->
      <view class="form-item">
        <input class="form-item--input" type="text" v-model="captchaCode" maxlength="5" placeholder="请输入图形验证码" />
        <view class="form-item--parts">
          <view class="captcha" @click="getCaptcha()">
            <image class="image" :src="captcha.base64"></image>
          </view>
        </view>
      </view>
      <!-- 注册按钮 -->
      <view class="login-button" @click="handleLogin">
        <text>注 册</text>
      </view>
	  </form>
    </view>

  </view>
</template>

<script>
  import store from '@/store'
  import * as LoginApi from '@/api/login'
  import * as CaptchaApi from '@/api/captcha'
  import * as Verify from '@/utils/verify'

  // 倒计时时长(秒)
  const times = 60

  // 表单验证场景
  const GET_CAPTCHA = 10
  const SUBMIT_LOGIN = 20

  export default {

    data() {
      return {
        // 正在加载
        isLoading: false,
        // 图形验证码信息
        captcha: {},
        // 倒计时
        times,
        // 手机号
        mobile: '',
		//登陆密码
		password: '',
        // 图形验证码
        captchaCode: '',
		// 推荐人ID
		refereeId: ''
      }
    },

    /**
     * 生命周期函数--监听页面加载
     */
    created() {
      // 获取图形验证码
      this.getCaptcha()
	  console.log('84_main_plateForm', this.platform)
	  console.log('85_main_code', this.$parent.code)
	  this.mpGetCode()  
    },

    methods: {

      // 获取图形验证码
      getCaptcha() {
        const app = this
        CaptchaApi.image()
          .then(result => app.captcha = result.data)
      },

      // 表单验证
      formValidation(scene = GET_CAPTCHA) {
        const app = this
          if (!app.validteRefereeId(app.refereeId) || !app.validteMobile(app.mobile) || !app.validtePassword(app.password) || !app.validteCaptchaCode(app.captchaCode)) {
            return false
          }
        return true
      },

      // 验证推荐人
      validteRefereeId(str) {
        if (Verify.isEmpty(str)) {
          this.$toast('请先输推荐人ID')
          return false
        }
        return true
      },
	  
	  // 验证手机号
	  validteMobile(str) {
	    if (Verify.isEmpty(str)) {
	      this.$toast('请先输入手机号')
	      return false
	    }
	    // if (!Verify.isMobile(str)) {
	    //   this.$toast('请输入正确格式的手机号')
	    //   return false
	    // }
	    return true
	  },

      // 登陆密码
      validtePassword(str) {
        if (Verify.isEmpty(str)) {
          this.$toast('请先输入登陆密码')
          return false
        }
		if (str.length < 6) {
			this.$toast('密码长度不能小于6位')
			return false
		}
        return true
      },
	  // 验证图形验证码
	  validteCaptchaCode(str) {
	    if (Verify.isEmpty(str)) {
	      this.$toast('请先输入图形验证码')
	      return false
	    }
	    return true
	  },

      // 执行定时器
      timer() {
        const app = this
        app.smsState = true
        const inter = setInterval(() => {
          app.times = app.times - 1
          if (app.times <= 0) {
            app.smsState = false
            app.times = times
            clearInterval(inter)
          }
        }, 1000)
      },

      // 点击登录
      handleLogin() {
        const app = this
        if (!app.isLoading && app.formValidation(GET_CAPTCHA)) {
          app.submitLogin()
        }
      },

      // 提交注册
      submitLogin() {
        const app = this
		console.log('174_main_code', app.$parent.code)
        app.isLoading = true
        LoginApi.otherUserAdd({
            mobile: app.mobile,
			password: app.password,
            refereeId: app.refereeId,
			captchaKey: app.captcha.key,
			captchaCode: app.captchaCode,
			code: app.$parent.code
          })
		  .then(setTimeout(() => {this.$navTo('pages/user/index')}, 500))
          .catch(err => {
            // 跳转回原页面
            if (err.result.data.isBack) {
              setTimeout(() => app.onNavigateBack(1), 2000)
            }
          })
          .finally(() => app.isLoading = false)
      },

      /**
       * 登录成功-跳转回原页面
       */
      onNavigateBack(delta = 1) {
        const pages = getCurrentPages()
        if (pages.length > 1) {
          uni.navigateBack({
            delta: Number(delta || 1)
          })
        } else {
          this.$navTo('pages/user/index')
        }
      },
	  
	  async mpGetCode() {
		  if (this.platform == 'MP-WEIXIN') {
		  	  this.$parent.code = await this.getCode()
		  	  console.log('217_main_code', this.$parent.code)
		  }
	  },	  
	  // 获取微信登录的code
	  // https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html
	  getCode() {
	    return new Promise((resolve, reject) => {
	      uni.login({
	        provider: 'weixin',
	        success({ code }) {
	          //console.log('225_main_获取到code', code)
	          resolve(code)
	        },
	        fail: reject
	      })
	    })
	  }

    }
  }
</script>

<style lang="scss" scoped>
  .container {
    padding: 100rpx 60rpx;
    min-height: 100vh;
    background-color: #fff;
  }

  // 页面头部
  .header {
    margin-bottom: 60rpx;

    .title {
      color: #191919;
      font-size: 54rpx;
    }

    .sub-title {
      margin-top: 20rpx;
      color: #b3b3b3;
      font-size: 28rpx;
    }
  }

  // 输入框元素
  .form-item {
    display: flex;
    padding: 18rpx;
    border-bottom: 1rpx solid #f3f1f2;
    margin-bottom: 30rpx;
    height: 96rpx;

    &--input {
      font-size: 28rpx;
      letter-spacing: 1rpx;
      flex: 1;
      height: 100%;
    }

    &--parts {
      min-width: 100rpx;
      height: 100%;
    }

    // 图形验证码
    .captcha {
      height: 100%;

      .image {
        display: block;
        width: 192rpx;
        height: 100%;
      }
    }


  }


  // 登录按钮
  .login-button {
    width: 100%;
    height: 86rpx;
    margin-top: 80rpx;
    background: #0ba90b;
    color: $main-text;
    border-radius: 80rpx;
    box-shadow: 0px 10px 20px 0px rgba(0, 170, 0, 0.1);
    letter-spacing: 5rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
